var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};
var option;
option = {
    title: {
    text: "数据实时监测图",
    textStyle: {
        color: "#333333",
        fontSize: 20
    },
    left: "center",
    top: "0%"
    },
    legend: {
    data:["燃烧带温度", "熔融带温度", "上部温度", "下部温度", "冷风压", "热风压", "炉底温度"],
    top: '5%',
    },
    xAxis: {
    type: 'category',
    data: []
    },
    yAxis: {
    type: 'value'
    },
    series: [
    {
        name: "燃烧带温度",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "熔融带温度",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "上部温度",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "下部温度",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "冷风压",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "热风压",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    },
    {
        name: "炉底温度",
        label: {
        show: true,
        position: 'top'
        },
        data: [],
        type: 'line',
        smooth: true
    }
    ]
};
// 删除多余的横坐标（最大长度为8）
function del_xAxis() {
    xdata.shift();
    for (let i = 0; i < option["legend"]["data"].length; i++){
        option['series'][i]['data'].shift();
    }
    myChart.setOption(option);
}
// 数据的请求并写入（纵坐标轴数据）
function write_yAxis(){
    $.ajax({
        url: "/api/chart-data",
        type: "GET",
        dataType: "json", 
        success: function(data) {
            for (let i = 0; i < 7; i++){
                option['series'][i]['data'].push(data[i+1]);
            }
            // 将2024-12-03 12:45:30缩短为12:45:30，以便让横坐标轴不出现重叠
            let date = new Date(data[8]);
            xdata.push(date.toLocaleTimeString());
        }
    })
}
// 将各个步骤整合
function total(){
    write_yAxis();
    count += 1;
    myChart.setOption(option);
    // 规定何时缩短横坐标轴
    if (count >= 8) {
        setTimeout(del_xAxis,1000);
    }
}

var xdata = option['xAxis']['data'];
var count = 0;
setInterval(total,1000);  // 设置定时器，每秒请求一次最新数据
window.addEventListener('resize', myChart.resize);



